<title>颜色辅助</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">颜色辅助</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">基本元素</a></li>
	 				<li class="breadcrumb-item active">颜色辅助</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
	<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-primary border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Primary Color</strong></p>
                                <p class="card-title">.bg-Primary</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#FFC107</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#7D84EB</small></p>
                                <div class="pt-1">
                                    <strong>primary Lighten 1</strong>
                                    <p class="mb-0">.bg-primary.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#949AEF</small></p>
                                <div class="pt-1">
                                    <strong>primary Lighten 2</strong>
                                    <p class="mb-0">.bg-primary.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B3B7F4</small></p>
                                <div class="pt-1">
                                    <strong>primary Lighten 3</strong>
                                    <p class="mb-0">.bg-primary.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D1D4F8</small></p>
                                <div class="pt-1">
                                    <strong>primary Lighten 4</strong>
                                    <p class="mb-0">.bg-primary.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#5E66E5</small></p>
                                <div class="pt-1">
                                    <strong>primary Darken 1</strong>
                                    <p class="mb-0">.bg-primary.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#535BE2</small></p>
                                <div class="pt-1">
                                    <strong>primary Darken 2</strong>
                                    <p class="mb-0">.bg-primary.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#4951DE</small></p>
                                <div class="pt-1">
                                    <strong>primary Darken 3</strong>
                                    <p class="mb-0">.bg-primary.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#383FD8</small></p>
                                <div class="pt-1">
                                    <strong>primary Darken 4</strong>
                                    <p class="mb-0">.bg-primary.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E2E2FF</small></p>
                                <div class="pt-1">
                                    <strong>primary Accent 1</strong>
                                    <p class="mb-0">.bg-primary.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#DBDBFF</small></p>
                                <div class="pt-1">
                                    <strong>primary Accent 2</strong>
                                    <p class="mb-0">.bg-primary.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BCBFFF</small></p>
                                <div class="pt-1">
                                    <strong>primary Accent 3</strong>
                                    <p class="mb-0">.bg-primary.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-primary bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#A2A6FF</small></p>
                                <div class="pt-1">
                                    <strong>primary Accent 4</strong>
                                    <p class="mb-0">.bg-primary.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-primary">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Primary Color</strong></p>
                        <p class="card-title">.border-primary</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#666EE8</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#26C0C3</small></p>
                                <div class="pt-1">
                                    <strong>Primary Lighten 1</strong>
                                    <p class="mb-0">.border-primary.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#949AEF</small></p>
                                <div class="pt-1">
                                    <strong>Primary Lighten 2</strong>
                                    <p class="mb-0">.border-primary.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B3B7F4</small></p>
                                <div class="pt-1">
                                    <strong>Primary Lighten 3</strong>
                                    <p class="mb-0">.border-primary.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D1D4F8</small></p>
                                <div class="pt-1">
                                    <strong>Primary Lighten 4</strong>
                                    <p class="mb-0">.border-primary.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#5E66E5</small></p>
                                <div class="pt-1">
                                    <strong>Primary Lighten 1</strong>
                                    <p class="mb-0">.border-primary.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#535BE2</small></p>
                                <div class="pt-1">
                                    <strong>Primary Lighten 2</strong>
                                    <p class="mb-0">.border-primary.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#4951DE</small></p>
                                <div class="pt-1">
                                    <strong>Primary Lighten 3</strong>
                                    <p class="mb-0">.border-primary.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#383FD8</small></p>
                                <div class="pt-1">
                                    <strong>Primary Lighten 4</strong>
                                    <p class="mb-0">.border-primary.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E2E2FF</small></p>
                                <div class="pt-1">
                                    <strong>Primary Accent 1</strong>
                                    <p class="mb-0">.border-primary.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#DBDBFF</small></p>
                                <div class="pt-1">
                                    <strong>Primary Accent 2</strong>
                                    <p class="mb-0">.border-primary.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BCBFFF</small></p>
                                <div class="pt-1">
                                    <strong>Primary Accent 3</strong>
                                    <p class="mb-0">.border-primary.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-primary border-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#A2A6FF</small></p>
                                <div class="pt-1">
                                    <strong>Primary Accent 4</strong>
                                    <p class="mb-0">.border-primary.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-top-primary border-top-5">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Primary Color</strong></p>
                        <p class="card-title">.primary</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 primary"><small class="float-right">#666EE8</small></p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-primary border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary lighten-1 float-left">#26C0C3</small>
                        <p class="mb-0 text-right"><strong>Primary Lighten 1</strong></p>
                        <p class="mb-0 text-right">.primary.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-primary border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary lighten-2 float-left">#949AEF</small>
                        <p class="mb-0 text-right"><strong>Primary Lighten 2</strong></p>
                        <p class="mb-0 text-right">.primary.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-primary border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary lighten-3 float-left">#B3B7F4</small>
                        <p class="mb-0 text-right"><strong>Primary Lighten 3</strong></p>
                        <p class="mb-0 text-right">.primary.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-primary border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary lighten-4 float-left">#D1D4F8</small>
                        <p class="mb-0 text-right"><strong>Primary Lighten 4</strong></p>
                        <p class="mb-0 text-right">.primary.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-primary border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary darken-1 float-left">#5E66E5</small>
                        <p class="mb-0 text-right"><strong>Primary Darken 1</strong></p>
                        <p class="mb-0 text-right">.primary.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-primary border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary darken-2 float-left">#535BE2</small>
                        <p class="mb-0 text-right"><strong>Primary Darken 2</strong></p>
                        <p class="mb-0 text-right">.primary.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-primary border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary darken-3 float-left">#4951DE</small>
                        <p class="mb-0 text-right"><strong>Primary Darken 3</strong></p>
                        <p class="mb-0 text-right">.primary.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-primary border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary darken-4 float-left">#383FD8</small>
                        <p class="mb-0 text-right"><strong>Primary Darken 4</strong></p>
                        <p class="mb-0 text-right">.primary.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-primary border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary accent-1 float-left">#E2E2FF</small>
                        <p class="mb-0 text-right"><strong>Primary Accent 1</strong></p>
                        <p class="mb-0 text-right">.primary.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-primary border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary accent-2 float-left">#DBDBFF</small>
                        <p class="mb-0 text-right"><strong>Primary Accent 2</strong></p>
                        <p class="mb-0 text-right">.primary.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-primary border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary accent-3 float-left">#BCBFFF</small>
                        <p class="mb-0 text-right"><strong>Primary Accent 3</strong></p>
                        <p class="mb-0 text-right">.primary.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-primary border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted primary accent-4 float-left">#A2A6FF</small>
                        <p class="mb-0 text-right"><strong>Primary Accent 4</strong></p>
                        <p class="mb-0 text-right">.primary.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->

<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-danger border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Danger Color</strong></p>
                                <p class="card-title">.bg-danger</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#FF4961</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF6479</small></p>
                                <div class="pt-1">
                                    <strong>Danger Lighten 1</strong>
                                    <p class="mb-0">.bg-danger.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF8090</small></p>
                                <div class="pt-1">
                                    <strong>Danger Lighten 2</strong>
                                    <p class="mb-0">.bg-danger.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFA4B0</small></p>
                                <div class="pt-1">
                                    <strong>Danger Lighten 3</strong>
                                    <p class="mb-0">.bg-danger.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFD6DB</small></p>
                                <div class="pt-1">
                                    <strong>Danger Lighten 4</strong>
                                    <p class="mb-0">.bg-danger.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF4259</small></p>
                                <div class="pt-1">
                                    <strong>Danger Darken 1</strong>
                                    <p class="mb-0">.bg-danger.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF394F</small></p>
                                <div class="pt-1">
                                    <strong>Danger Darken 2</strong>
                                    <p class="mb-0">.bg-danger.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF3145</small></p>
                                <div class="pt-1">
                                    <strong>Danger Darken 3</strong>
                                    <p class="mb-0">.bg-danger.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF2133</small></p>
                                <div class="pt-1">
                                    <strong>Danger Darken 4</strong>
                                    <p class="mb-0">.bg-danger.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#fff1f1</small></p>
                                <div class="pt-1">
                                    <strong>Danger Accent 1</strong>
                                    <p class="mb-0">.bg-danger.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#ffe5e6</small></p>
                                <div class="pt-1">
                                    <strong>Danger Accent 2</strong>
                                    <p class="mb-0">.bg-danger.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFD0D3</small></p>
                                <div class="pt-1">
                                    <strong>Danger Accent 3</strong>
                                    <p class="mb-0">.bg-danger.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-danger bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFB7BC</small></p>
                                <div class="pt-1">
                                    <strong>Danger Accent 4</strong>
                                    <p class="mb-0">.bg-danger.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-danger">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Danger Color</strong></p>
                        <p class="card-title">.border-danger</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#FF4961</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF6479</small></p>
                                <div class="pt-1">
                                    <strong>Danger Lighten 1</strong>
                                    <p class="mb-0">.border-danger.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF8090</small></p>
                                <div class="pt-1">
                                    <strong>Danger Lighten 2</strong>
                                    <p class="mb-0">.border-danger.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFA4B0</small></p>
                                <div class="pt-1">
                                    <strong>Danger Lighten 3</strong>
                                    <p class="mb-0">.border-danger.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFD6DB</small></p>
                                <div class="pt-1">
                                    <strong>Danger Lighten 4</strong>
                                    <p class="mb-0">.border-danger.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF4259</small></p>
                                <div class="pt-1">
                                    <strong>Danger Darken 1</strong>
                                    <p class="mb-0">.border-danger.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF394F</small></p>
                                <div class="pt-1">
                                    <strong>Danger Darken 2</strong>
                                    <p class="mb-0">.border-danger.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF3145</small></p>
                                <div class="pt-1">
                                    <strong>Danger Darken 3</strong>
                                    <p class="mb-0">.border-danger.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF2133</small></p>
                                <div class="pt-1">
                                    <strong>Danger Darken 4</strong>
                                    <p class="mb-0">.border-danger.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#fff1f1</small></p>
                                <div class="pt-1">
                                    <strong>Danger Accent 1</strong>
                                    <p class="mb-0">.border-danger.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#ffe5e6</small></p>
                                <div class="pt-1">
                                    <strong>Danger Accent 2</strong>
                                    <p class="mb-0">.border-danger.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFD0D3</small></p>
                                <div class="pt-1">
                                    <strong>Danger Accent 3</strong>
                                    <p class="mb-0">.border-danger.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-danger border-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFB7BC</small></p>
                                <div class="pt-1">
                                    <strong>Danger Accent 4</strong>
                                    <p class="mb-0">.border-danger.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card-group mb-1">
                <div class="card p-1 border-top-danger border-top-5">
                    <div class="card-content">
                        <div class="card-body">
                        <div class="float-left">
                            <p class="mb-0"><strong>Danger Color</strong></p>
                            <p class="card-title">.danger</p>
                        </div>
                        <div class="float-right">
                            <p class="card-title mb-0 danger"><small class="float-right">#FA626B</small></p>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-danger border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger lighten-1 float-left">#DF5E6A</small>
                        <p class="mb-0 text-right"><strong>Danger Lighten 1</strong></p>
                        <p class="mb-0 text-right">.danger.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-danger border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger lighten-2 float-left">#ED5565</small>
                        <p class="mb-0 text-right"><strong>Danger Lighten 2</strong></p>
                        <p class="mb-0 text-right">.danger.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-danger border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger lighten-3 float-left">#E47782</small>
                        <p class="mb-0 text-right"><strong>Danger Lighten 3</strong></p>
                        <p class="mb-0 text-right">.danger.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-danger border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger lighten-4 float-left">#F0B3B9</small>
                        <p class="mb-0 text-right"><strong>Danger Lighten 4</strong></p>
                        <p class="mb-0 text-right">.danger.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-danger border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger darken-1 float-left">#FF4259</small>
                        <p class="mb-0 text-right"><strong>Danger Darken 1</strong></p>
                        <p class="mb-0 text-right">.danger.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-danger border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger darken-2 float-left">#FF394F</small>
                        <p class="mb-0 text-right"><strong>Danger Darken 2</strong></p>
                        <p class="mb-0 text-right">.danger.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-danger border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger darken-2 float-left">#FF3145</small>
                        <p class="mb-0 text-right"><strong>Danger Darken 3</strong></p>
                        <p class="mb-0 text-right">.danger.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-danger border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger darken-4 float-left">#FF2133</small>
                        <p class="mb-0 text-right"><strong>Danger Darken 4</strong></p>
                        <p class="mb-0 text-right">.danger.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-danger border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger accent-1 float-left">#fff1f1</small>
                        <p class="mb-0 text-right"><strong>Danger Darken 1</strong></p>
                        <p class="mb-0 text-right">.danger.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-danger border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger accent-2 float-left">#ffe5e6</small>
                        <p class="mb-0 text-right"><strong>Danger Darken 2</strong></p>
                        <p class="mb-0 text-right">.danger.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-danger border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger accent-3 float-left">#FFD0D3</small>
                        <p class="mb-0 text-right"><strong>Danger Darken 3</strong></p>
                        <p class="mb-0 text-right">.danger.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-danger border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted danger accent-4 float-left">#FFB7BC</small>
                        <p class="mb-0 text-right"><strong>Danger Darken 4</strong></p>
                        <p class="mb-0 text-right">.danger.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-success border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Success Color</strong></p>
                                <p class="card-title">.bg-success</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#28D094</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#48D7A4</small></p>
                                <div class="pt-1">
                                    <strong>Success Lighten 1</strong>
                                    <p class="mb-0">.bg-success.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#69DEB4</small></p>
                                <div class="pt-1">
                                    <strong>Success Lighten 2</strong>
                                    <p class="mb-0">.bg-success.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#94E8CA</small></p>
                                <div class="pt-1">
                                    <strong>Success Lighten 3</strong>
                                    <p class="mb-0">.bg-success.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BFF1DF</small></p>
                                <div class="pt-1">
                                    <strong>Success Lighten 4</strong>
                                    <p class="mb-0">.bg-success.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#24CB8C</small></p>
                                <div class="pt-1">
                                    <strong>Success Darken 1</strong>
                                    <p class="mb-0">.bg-success.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1EC481</small></p>
                                <div class="pt-1">
                                    <strong>Success Darken 2</strong>
                                    <p class="mb-0">.bg-success.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#18BE77</small></p>
                                <div class="pt-1">
                                    <strong>Success Darken 3</strong>
                                    <p class="mb-0">.bg-success.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#0FB365</small></p>
                                <div class="pt-1">
                                    <strong>Success Darken 4</strong>
                                    <p class="mb-0">.bg-success.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#eeffee</small></p>
                                <div class="pt-1">
                                    <strong>Success Accent 1</strong>
                                    <p class="mb-0">.bg-accent.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#AEFFD5</small></p>
                                <div class="pt-1">
                                    <strong>Success Accent 2</strong>
                                    <p class="mb-0">.bg-accent.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#7BFFBB</small></p>
                                <div class="pt-1">
                                    <strong>Success Accent 3</strong>
                                    <p class="mb-0">.bg-accent.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-success bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#62FFAE</small></p>
                                <div class="pt-1">
                                    <strong>Success Accent 4</strong>
                                    <p class="mb-0">.bg-accent.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-success">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Success Color</strong></p>
                        <p class="card-title">.border-success</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title"><small class="float-right">#28D094</small></p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#48D7A4</small></p>
                                <div class="pt-1">
                                    <strong>Success Lighten 1</strong>
                                    <p class="mb-0">.border-success.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#69DEB4</small></p>
                                <div class="pt-1">
                                    <strong>Success Lighten 2</strong>
                                    <p class="mb-0">.border-success.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#94E8CA</small></p>
                                <div class="pt-1">
                                    <strong>Success Lighten 3</strong>
                                    <p class="mb-0">.border-success.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BFF1DF</small></p>
                                <div class="pt-1">
                                    <strong>Success Lighten 4</strong>
                                    <p class="mb-0">.border-success.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#24CB8C</small></p>
                                <div class="pt-1">
                                    <strong>Success Darken 1</strong>
                                    <p class="mb-0">.border-success.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1EC481</small></p>
                                <div class="pt-1">
                                    <strong>Success Darken 2</strong>
                                    <p class="mb-0">.border-success.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#18BE77</small></p>
                                <div class="pt-1">
                                    <strong>Success Darken 3</strong>
                                    <p class="mb-0">.border-success.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#0FB365</small></p>
                                <div class="pt-1">
                                    <strong>Success Darken 4</strong>
                                    <p class="mb-0">.border-success.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E1FFF0</small></p>
                                <div class="pt-1">
                                    <strong>Success Accent 1</strong>
                                    <p class="mb-0">.border-success.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#AEFFD5</small></p>
                                <div class="pt-1">
                                    <strong>Success Accent 2</strong>
                                    <p class="mb-0">.border-success.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#7BFFBB</small></p>
                                <div class="pt-1">
                                    <strong>Success Accent 3</strong>
                                    <p class="mb-0">.border-success.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-success border-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#62FFAE</small></p>
                                <div class="pt-1">
                                    <strong>Success Accent 4</strong>
                                    <p class="mb-0">.border-success.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4>Text Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-top-success border-top-5">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Success Color</strong></p>
                        <p class="card-title">.success</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 success"><small class="float-right">#28D094</small></p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-success border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success lighten-1 float-left">#48D7A4</small>
                        <p class="mb-0 text-right"><strong>Success Lighten 1</strong></p>
                        <p class="mb-0 text-right">.success.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-success border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success lighten-2 float-left">#69DEB4</small>
                        <p class="mb-0 text-right"><strong>Success Lighten 2</strong></p>
                        <p class="mb-0 text-right">.success.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-success border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success lighten-3 float-left">#94E8CA</small>
                        <p class="mb-0 text-right"><strong>Success Lighten 3</strong></p>
                        <p class="mb-0 text-right">.success.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-success border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success lighten-4 float-left">#BFF1DF</small>
                        <p class="mb-0 text-right"><strong>Success Lighten 4</strong></p>
                        <p class="mb-0 text-right">.success.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-success border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success darken-1 float-left">#24CB8C</small>
                        <p class="mb-0 text-right"><strong>Darken darken 1</strong></p>
                        <p class="mb-0 text-right">.success.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-success border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success darken-2 float-left">#1EC481</small>
                        <p class="mb-0 text-right"><strong>Darken darken 2</strong></p>
                        <p class="mb-0 text-right">.success.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-success border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success darken-3 float-left">#18BE77</small>
                        <p class="mb-0 text-right"><strong>Darken darken 3</strong></p>
                        <p class="mb-0 text-right">.success.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-success border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success darken-4 float-left">#0FB365</small>
                        <p class="mb-0 text-right"><strong>Darken darken 4</strong></p>
                        <p class="mb-0 text-right">.success.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-success border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success accent-1 float-left">#E1FFF0</small>
                        <p class="mb-0 text-right"><strong>Accent darken 1</strong></p>
                        <p class="mb-0 text-right">.success.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-success border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success accent-2 float-left">#AEFFD5</small>
                        <p class="mb-0 text-right"><strong>Accent darken 2</strong></p>
                        <p class="mb-0 text-right">.success.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-success border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success accent-3 float-left">#7BFFBB</small>
                        <p class="mb-0 text-right"><strong>Accent darken 3</strong></p>
                        <p class="mb-0 text-right">.success.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-success border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted success accent-4 float-left">#62FFAE</small>
                        <p class="mb-0 text-right"><strong>Accent darken 4</strong></p>
                        <p class="mb-0 text-right">.success.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-warning border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Warning Color</strong></p>
                                <p class="card-title">.bg-warning</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#FF9149</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFA264</small></p>
                                <div class="pt-1">
                                    <strong>Warning Lighten 1</strong>
                                    <p class="mb-0">.bg-warning.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFB280</small></p>
                                <div class="pt-1">
                                    <strong>Warning Lighten 2</strong>
                                    <p class="mb-0">.bg-warning.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFC8A4</small></p>
                                <div class="pt-1">
                                    <strong>Warning Lighten 3</strong>
                                    <p class="mb-0">.bg-warning.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFE5D8</small></p>
                                <div class="pt-1">
                                    <strong>Warning Lighten 4</strong>
                                    <p class="mb-0">.bg-warning.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF8942</small></p>
                                <div class="pt-1">
                                    <strong>Warning Darken 1</strong>
                                    <p class="mb-0">.bg-warning.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF7E39</small></p>
                                <div class="pt-1">
                                    <strong>Warning Darken 2</strong>
                                    <p class="mb-0">.bg-warning.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF7431</small></p>
                                <div class="pt-1">
                                    <strong>Warning Darken 3</strong>
                                    <p class="mb-0">.bg-warning.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF6221</small></p>
                                <div class="pt-1">
                                    <strong>Warning Darken 4</strong>
                                    <p class="mb-0">.bg-warning.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFFBF6</small></p>
                                <div class="pt-1">
                                    <strong>Warning Accent 1</strong>
                                    <p class="mb-0">.bg-warning.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFE5D8</small></p>
                                <div class="pt-1">
                                    <strong>Warning Accent 2</strong>
                                    <p class="mb-0">.bg-warning.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFDDD0</small></p>
                                <div class="pt-1">
                                    <strong>Warning Accent 3</strong>
                                    <p class="mb-0">.bg-warning.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-warning bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFCAB7</small></p>
                                <div class="pt-1">
                                    <strong>Warning Accent 4</strong>
                                    <p class="mb-0">.bg-warning.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4>Border Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-warning">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Warning Color</strong></p>
                        <p class="card-title">.border-warning</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#FF9149</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFA264</small></p>
                                <div class="pt-1">
                                    <strong>Warning Lighten 1</strong>
                                    <p class="mb-0">.border-warning.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFB280</small></p>
                                <div class="pt-1">
                                    <strong>Warning Lighten 2</strong>
                                    <p class="mb-0">.border-warning.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFC8A4</small></p>
                                <div class="pt-1">
                                    <strong>Warning Lighten 3</strong>
                                    <p class="mb-0">.border-warning.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFE5D8</small></p>
                                <div class="pt-1">
                                    <strong>Warning Lighten 4</strong>
                                    <p class="mb-0">.border-warning.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF8942</small></p>
                                <div class="pt-1">
                                    <strong>Warning Darken 1</strong>
                                    <p class="mb-0">.border-warning.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF7E39</small></p>
                                <div class="pt-1">
                                    <strong>Warning Darken 2</strong>
                                    <p class="mb-0">.border-warning.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF7431</small></p>
                                <div class="pt-1">
                                    <strong>Warning Darken 3</strong>
                                    <p class="mb-0">.border-warning.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF6221</small></p>
                                <div class="pt-1">
                                    <strong>Warning Darken 4</strong>
                                    <p class="mb-0">.border-warning.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFFBF6</small></p>
                                <div class="pt-1">
                                    <strong>Warning Accent 1</strong>
                                    <p class="mb-0">.border-warning.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFE5D8</small></p>
                                <div class="pt-1">
                                    <strong>Warning Accent 2</strong>
                                    <p class="mb-0">.border-warning.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFDDD0</small></p>
                                <div class="pt-1">
                                    <strong>Warning Accent 3</strong>
                                    <p class="mb-0">.border-warning.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-warning border-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFCAB7</small></p>
                                <div class="pt-1">
                                    <strong>Warning Accent 4</strong>
                                    <p class="mb-0">.border-warning.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card-group mb-1">
                <div class="card p-1 border-top-warning border-top-5">
                    <div class="card-content">
                        <div class="card-body">
                        <div class="float-left">
                            <p class="mb-0"><strong>Warning Color</strong></p>
                            <p class="card-title">.warning</p>
                        </div>
                        <div class="float-right">
                            <p class="card-title mb-0 warning"><small class="float-right">#FF9149</small></p>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-warning border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning lighten-1 float-left">#FFA264</small>
                        <p class="mb-0 text-right"><strong>Warning Lighten 1</strong></p>
                        <p class="mb-0 text-right">.warning.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-warning border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning lighten-2 float-left">#FFB280</small>
                        <p class="mb-0 text-right"><strong>Warning Lighten 2</strong></p>
                        <p class="mb-0 text-right">.warning.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-warning border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning lighten-3 float-left">#FFC8A4</small>
                        <p class="mb-0 text-right"><strong>Warning Lighten 3</strong></p>
                        <p class="mb-0 text-right">.warning.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-warning border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning lighten-4 float-left">#FFE5D8</small>
                        <p class="mb-0 text-right"><strong>Warning Lighten 4</strong></p>
                        <p class="mb-0 text-right">.warning.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-warning border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning darken-1 float-left">#FF8942</small>
                        <p class="mb-0 text-right"><strong>Warning Darken 1</strong></p>
                        <p class="mb-0 text-right">.warning.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-warning border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning darken-2 float-left">#FF7E39</small>
                        <p class="mb-0 text-right"><strong>Warning Darken 2</strong></p>
                        <p class="mb-0 text-right">.warning.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-warning border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning darken-3 float-left">#FF7431</small>
                        <p class="mb-0 text-right"><strong>Warning Darken 3</strong></p>
                        <p class="mb-0 text-right">.warning.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-warning border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning darken-4 float-left">#FF6221</small>
                        <p class="mb-0 text-right"><strong>Warning Darken 4</strong></p>
                        <p class="mb-0 text-right">.warning.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-warning border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning accent-1 float-left">#FFFBF6</small>
                        <p class="mb-0 text-right"><strong>Warning Accent 1</strong></p>
                        <p class="mb-0 text-right">.warning.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-warning border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning accent-2 float-left">#FFE5D8</small>
                        <p class="mb-0 text-right"><strong>Warning Accent 2</strong></p>
                        <p class="mb-0 text-right">.warning.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-warning border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning accent-3 float-left">#FFDDD0</small>
                        <p class="mb-0 text-right"><strong>Warning Accent 3</strong></p>
                        <p class="mb-0 text-right">.warning.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-warning border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted warning accent-4 float-left">#FFCAB7</small>
                        <p class="mb-0 text-right"><strong>Warning Accent 4</strong></p>
                        <p class="mb-0 text-right">.warning.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-info border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Info Color</strong></p>
                                <p class="card-title">.bg-info</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#1E9FF2</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#40ADF4</small></p>
                                <div class="pt-1">
                                    <strong>Info Lighten 1</strong>
                                    <p class="mb-0">.bg-info.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#62BCF6</small></p>
                                <div class="pt-1">
                                    <strong>Info Lighten 2</strong>
                                    <p class="mb-0">.bg-info.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#8FCFF9</small></p>
                                <div class="pt-1">
                                    <strong>Info Lighten 3</strong>
                                    <p class="mb-0">.bg-info.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BCE2FB</small></p>
                                <div class="pt-1">
                                    <strong>Info Lighten 4</strong>
                                    <p class="mb-0">.bg-info.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1A97F0</small></p>
                                <div class="pt-1">
                                    <strong>Info Darken 4</strong>
                                    <p class="mb-0">.bg-info.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#168DEE</small></p>
                                <div class="pt-1">
                                    <strong>Info Darken 2</strong>
                                    <p class="mb-0">.bg-info.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1283EC</small></p>
                                <div class="pt-1">
                                    <strong>Info Darken 3</strong>
                                    <p class="mb-0">.bg-info.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#0A72E8</small></p>
                                <div class="pt-1">
                                    <strong>Info Darken 4</strong>
                                    <p class="mb-0">.bg-info.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EFF5FF</small></p>
                                <div class="pt-1">
                                    <strong>Info Accent 4</strong>
                                    <p class="mb-0">.bg-info.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#DFECFF</small></p>
                                <div class="pt-1">
                                    <strong>Info Accent 2</strong>
                                    <p class="mb-0">.bg-info.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#ACCFFF</small></p>
                                <div class="pt-1">
                                    <strong>Info Accent 3</strong>
                                    <p class="mb-0">.bg-info.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-info bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#92C0FF</small></p>
                                <div class="pt-1">
                                    <strong>Info Accent 4</strong>
                                    <p class="mb-0">.bg-info.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Info Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-info">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Info Color</strong></p>
                        <p class="card-title">.border-info</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#1E9FF2</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#40ADF4</small></p>
                                <div class="pt-1">
                                    <strong>Info Lighten 1</strong>
                                    <p class="mb-0">.border-info.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#62BCF6</small></p>
                                <div class="pt-1">
                                    <strong>Info Lighten 2</strong>
                                    <p class="mb-0">.border-info.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#8FCFF9</small></p>
                                <div class="pt-1">
                                    <strong>Info Lighten 3</strong>
                                    <p class="mb-0">.border-info.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BCE2FB</small></p>
                                <div class="pt-1">
                                    <strong>Info Lighten 4</strong>
                                    <p class="mb-0">.border-info.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1A97F0</small></p>
                                <div class="pt-1">
                                    <strong>Info Darken 1</strong>
                                    <p class="mb-0">.border-info.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#168DEE</small></p>
                                <div class="pt-1">
                                    <strong>Info Darken 2</strong>
                                    <p class="mb-0">.border-info.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1283EC</small></p>
                                <div class="pt-1">
                                    <strong>Info Darken 3</strong>
                                    <p class="mb-0">.border-info.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#0A72E8</small></p>
                                <div class="pt-1">
                                    <strong>Info Darken 4</strong>
                                    <p class="mb-0">.border-info.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EFF5FF</small></p>
                                <div class="pt-1">
                                    <strong>Info Accent 1</strong>
                                    <p class="mb-0">.border-info.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#DFECFF</small></p>
                                <div class="pt-1">
                                    <strong>Info Accent 2</strong>
                                    <p class="mb-0">.border-info.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#ACCFFF</small></p>
                                <div class="pt-1">
                                    <strong>Info Accent 3</strong>
                                    <p class="mb-0">.border-info.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-info border-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#92C0FF</small></p>
                                <div class="pt-1">
                                    <strong>Info Accent 4</strong>
                                    <p class="mb-0">.border-info.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card-group mb-1">
                <div class="card p-1 border-top-info border-top-5">
                    <div class="card-content">
                        <div class="card-body">
                        <div class="float-left">
                            <p class="mb-0"><strong>Info Color</strong></p>
                            <p class="card-title">.info</p>
                        </div>
                        <div class="float-right">
                            <p class="card-title mb-0 info"><small class="float-right">#1E9FF2</small></p>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-info border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info lighten-1 float-left">#40ADF4</small>
                        <p class="mb-0 text-right"><strong>Info Lighten 1</strong></p>
                        <p class="mb-0 text-right">.info.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-info border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info lighten-2 float-left">#62BCF6</small>
                        <p class="mb-0 text-right"><strong>Info Lighten 2</strong></p>
                        <p class="mb-0 text-right">.info.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-info border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info lighten-3 float-left">#8FCFF9</small>
                        <p class="mb-0 text-right"><strong>Info Lighten 3</strong></p>
                        <p class="mb-0 text-right">.info.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-info border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info lighten-4 float-left">#BCE2FB</small>
                        <p class="mb-0 text-right"><strong>Info Lighten 4</strong></p>
                        <p class="mb-0 text-right">.info.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-info border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info darken-1 float-left">#1A97F0</small>
                        <p class="mb-0 text-right"><strong>Info Darken 1</strong></p>
                        <p class="mb-0 text-right">.info.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-info border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info darken-2 float-left">#168DEE</small>
                        <p class="mb-0 text-right"><strong>Info Darken 2</strong></p>
                        <p class="mb-0 text-right">.info.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-info border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info darken-3 float-left">#1283EC</small>
                        <p class="mb-0 text-right"><strong>Info Darken 3</strong></p>
                        <p class="mb-0 text-right">.info.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-info border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info darken-4 float-left">#0A72E8</small>
                        <p class="mb-0 text-right"><strong>Info Darken 4</strong></p>
                        <p class="mb-0 text-right">.info.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-info border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info accent-1 float-left">#EFF5FF</small>
                        <p class="mb-0 text-right"><strong>Info Accent 1</strong></p>
                        <p class="mb-0 text-right">.info.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-info border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info accent-2 float-left">#DFECFF</small>
                        <p class="mb-0 text-right"><strong>Info Accent 2</strong></p>
                        <p class="mb-0 text-right">.info.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-info border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info accent-3 float-left">#ACCFFF</small>
                        <p class="mb-0 text-right"><strong>Info Accent 3</strong></p>
                        <p class="mb-0 text-right">.info.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-info border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted info accent-4 float-left">#92C0FF</small>
                        <p class="mb-0 text-right"><strong>Info Accent 4</strong></p>
                        <p class="mb-0 text-right">.info.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-red border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Red Color</strong></p>
                                <p class="card-title">.bg-red</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#F44336</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EF5350</small></p>
                                <div class="pt-1">
                                    <strong>Red Lighten 1</strong>
                                    <p class="mb-0">.bg-red.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E57373</small></p>
                                <div class="pt-1">
                                    <strong>Red Lighten 2</strong>
                                    <p class="mb-0">.bg-red.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EF9A9A</small></p>
                                <div class="pt-1">
                                    <strong>Red Lighten 3</strong>
                                    <p class="mb-0">.bg-red.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFCDD2</small></p>
                                <div class="pt-1">
                                    <strong>Red Lighten 4</strong>
                                    <p class="mb-0">.bg-red.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E53935</small></p>
                                <div class="pt-1">
                                    <strong>Red Darken 1</strong>
                                    <p class="mb-0">.bg-red.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D32F2F</small></p>
                                <div class="pt-1">
                                    <strong>Red Darken 2</strong>
                                    <p class="mb-0">.bg-red.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#C62828</small></p>
                                <div class="pt-1">
                                    <strong>Red Darken 3</strong>
                                    <p class="mb-0">.bg-red.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B71C1C</small></p>
                                <div class="pt-1">
                                    <strong>Red Darken 4</strong>
                                    <p class="mb-0">.bg-red.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF8A80</small></p>
                                <div class="pt-1">
                                    <strong>Red Accent 1</strong>
                                    <p class="mb-0">.bg-red.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF5252</small></p>
                                <div class="pt-1">
                                    <strong>Red Accent 2</strong>
                                    <p class="mb-0">.bg-red.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF1744</small></p>
                                <div class="pt-1">
                                    <strong>Red Accent 3</strong>
                                    <p class="mb-0">.bg-red.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-red bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D50000</small></p>
                                <div class="pt-1">
                                    <strong>Red Accent 4</strong>
                                    <p class="mb-0">.bg-red.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-red">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Red Color</strong></p>
                        <p class="card-title">.border-red</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#F44336</small></p>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EF5350</small></p>
                                <div class="pt-1">
                                    <strong>Red Lighten 1</strong>
                                    <p class="mb-0">.border-red.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E57373</small></p>
                                <div class="pt-1">
                                    <strong>Red Lighten 2</strong>
                                    <p class="mb-0">.border-red.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EF9A9A</small></p>
                                <div class="pt-1">
                                    <strong>Red Lighten 3</strong>
                                    <p class="mb-0">.border-red.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFCDD2</small></p>
                                <div class="pt-1">
                                    <strong>Red Lighten 4</strong>
                                    <p class="mb-0">.border-red.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E53935</small></p>
                                <div class="pt-1">
                                    <strong>Red Darken 1</strong>
                                    <p class="mb-0">.border-red.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D32F2F</small></p>
                                <div class="pt-1">
                                    <strong>Red Darken 2</strong>
                                    <p class="mb-0">.border-red.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#C62828</small></p>
                                <div class="pt-1">
                                    <strong>Red Darken 3</strong>
                                    <p class="mb-0">.border-red.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B71C1C</small></p>
                                <div class="pt-1">
                                    <strong>Red Darken 4</strong>
                                    <p class="mb-0">.border-red.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF8A80</small></p>
                                <div class="pt-1">
                                    <strong>Red Accent 1</strong>
                                    <p class="mb-0">.border-red.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF5252</small></p>
                                <div class="pt-1">
                                    <strong>Red Accent 2</strong>
                                    <p class="mb-0">.border-red.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF1744</small></p>
                                <div class="pt-1">
                                    <strong>Red Accent 3</strong>
                                    <p class="mb-0">.border-red.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-red border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D50000</small></p>
                                <div class="pt-1">
                                    <strong>Red Accent 4</strong>
                                    <p class="mb-0">.border-red.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Red Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-top-red border-top-5">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Red Color</strong></p>
                        <p class="card-title">.red</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 red"><small class="float-right">#F44336</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-red border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red lighten-1 float-left">#EF5350</small>
                        <p class="mb-0 text-right"><strong>Red Lighten 1</strong></p>
                        <p class="mb-0 text-right">.red.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-red border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red lighten-2 float-left">#E57373</small>
                        <p class="mb-0 text-right"><strong>Red Lighten 2</strong></p>
                        <p class="mb-0 text-right">.red.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-red border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red lighten-3 float-left">#EF9A9A</small>
                        <p class="mb-0 text-right"><strong>Red Lighten 3</strong></p>
                        <p class="mb-0 text-right">.red.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-red border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red lighten-4 float-left">#FFCDD2</small>
                        <p class="mb-0 text-right"><strong>Red Lighten 4</strong></p>
                        <p class="mb-0 text-right">.red.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-red border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red darken-1 float-left">#E53935</small>
                        <p class="mb-0 text-right"><strong>Red Darken 1</strong></p>
                        <p class="mb-0 text-right">.red.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-red border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red darken-2 float-left">#D32F2F</small>
                        <p class="mb-0 text-right"><strong>Red Darken 2</strong></p>
                        <p class="mb-0 text-right">.red.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-red border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red darken-3 float-left">#C62828</small>
                        <p class="mb-0 text-right"><strong>Red Darken 3</strong></p>
                        <p class="mb-0 text-right">.red.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-red border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red darken-4 float-left">#B71C1C</small>
                        <p class="mb-0 text-right"><strong>Red Darken 4</strong></p>
                        <p class="mb-0 text-right">.red.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-red border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red accent-1 float-left">#FF8A80</small>
                        <p class="mb-0 text-right"><strong>Red Accent 1</strong></p>
                        <p class="mb-0 text-right">.red.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-red border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red accent-2 float-left">#FF5252</small>
                        <p class="mb-0 text-right"><strong>Red Accent 2</strong></p>
                        <p class="mb-0 text-right">.red.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-red border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red accent-3 float-left">#FF1744</small>
                        <p class="mb-0 text-right"><strong>Red Accent 3</strong></p>
                        <p class="mb-0 text-right">.red.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-red border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted red accent-4 float-left">#D50000</small>
                        <p class="mb-0 text-right"><strong>Red Accent 4</strong></p>
                        <p class="mb-0 text-right">.red.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-pink border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Pink Color</strong></p>
                                <p class="card-title">.bg-pink</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#FFC107</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EC407A</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 1</strong>
                                    <p class="mb-0">.bg-pink.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F06292</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 2</strong>
                                    <p class="mb-0">.bg-pink.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F48FB1</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 3</strong>
                                    <p class="mb-0">.bg-pink.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F8BBD0</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 4</strong>
                                    <p class="mb-0">.bg-pink.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D81B60</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 1</strong>
                                    <p class="mb-0">.bg-pink.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#C2185B</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 2</strong>
                                    <p class="mb-0">.bg-pink.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#AD1457</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 3</strong>
                                    <p class="mb-0">.bg-pink.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#880E4F</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 4</strong>
                                    <p class="mb-0">.bg-pink.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF80AB</small></p>
                                <div class="pt-1">
                                    <strong>Pink Accent 1</strong>
                                    <p class="mb-0">.bg-pink.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF4081</small></p>
                                <div class="pt-1">
                                    <strong>Pink Accent 2</strong>
                                    <p class="mb-0">.bg-pink.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F50057</small></p>
                                <div class="pt-1">
                                    <strong>Pink Accent 3</strong>
                                    <p class="mb-0">.bg-pink.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-pink bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#C51162</small></p>
                                <div class="pt-1">
                                    <strong>Pink Accent 4</strong>
                                    <p class="mb-0">.bg-pink.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-pink">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Pink Color</strong></p>
                        <p class="card-title">.border-pink</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#E91E63</small></p>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EC407A</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 1</strong>
                                    <p class="mb-0">.border-pink.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F06292</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 2</strong>
                                    <p class="mb-0">.border-pink.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F48FB1</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 3</strong>
                                    <p class="mb-0">.border-pink.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F8BBD0</small></p>
                                <div class="pt-1">
                                    <strong>Pink Lighten 4</strong>
                                    <p class="mb-0">.border-pink.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D81B60</small></p>
                                <div class="pt-1">
                                    <strong>Pink Darken 1</strong>
                                    <p class="mb-0">.border-pink.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#C2185B</small></p>
                                <div class="pt-1">
                                    <strong>Pink Darken 2</strong>
                                    <p class="mb-0">.border-pink.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#AD1457</small></p>
                                <div class="pt-1">
                                    <strong>Pink Darken 3</strong>
                                    <p class="mb-0">.border-pink.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#880E4F</small></p>
                                <div class="pt-1">
                                    <strong>Pink Darken 4</strong>
                                    <p class="mb-0">.border-pink.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF80AB</small></p>
                                <div class="pt-1">
                                    <strong>Pink Accent 1</strong>
                                    <p class="mb-0">.border-pink.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FF4081</small></p>
                                <div class="pt-1">
                                    <strong>Pink Accent 2</strong>
                                    <p class="mb-0">.border-pink.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F50057</small></p>
                                <div class="pt-1">
                                    <strong>Pink Accent 3</strong>
                                    <p class="mb-0">.border-pink.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-pink border-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#C51162</small></p>
                                <div class="pt-1">
                                    <strong>Pink Accent 4</strong>
                                    <p class="mb-0">.border-pink.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-top-pink border-top-5">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Pink Color</strong></p>
                        <p class="card-title">.pink</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 pink"><small class="float-right">#E91E63</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-pink border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink lighten-1 float-left">#EC407A</small>
                        <p class="mb-0 text-right"><strong>Pink Lighten 1</strong></p>
                        <p class="mb-0 text-right">.pink.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-pink border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink lighten-2 float-left">#F06292</small>
                        <p class="mb-0 text-right"><strong>Pink Lighten 2</strong></p>
                        <p class="mb-0 text-right">.pink.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-pink border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink lighten-3 float-left">#F48FB1</small>
                        <p class="mb-0 text-right"><strong>Pink Lighten 3</strong></p>
                        <p class="mb-0 text-right">.pink.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-pink border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink lighten-4 float-left">#F8BBD0</small>
                        <p class="mb-0 text-right"><strong>Pink Lighten 4</strong></p>
                        <p class="mb-0 text-right">.pink.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-pink border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink darken-1 float-left">#D81B60</small>
                        <p class="mb-0 text-right"><strong>Pink Darken 1</strong></p>
                        <p class="mb-0 text-right">.pink.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-pink border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink darken-2 float-left">#C2185B</small>
                        <p class="mb-0 text-right"><strong>Pink Darken 2</strong></p>
                        <p class="mb-0 text-right">.pink.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-pink border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink darken-3 float-left">#AD1457</small>
                        <p class="mb-0 text-right"><strong>Pink Darken 3</strong></p>
                        <p class="mb-0 text-right">.pink.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-pink border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink darken-4 float-left">#880E4F</small>
                        <p class="mb-0 text-right"><strong>Pink Darken 4</strong></p>
                        <p class="mb-0 text-right">.pink.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-pink border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink accent-1 float-left">#FF80AB</small>
                        <p class="mb-0 text-right"><strong>Pink Accent 1</strong></p>
                        <p class="mb-0 text-right">.pink.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-pink border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink accent-2 float-left">#FF4081</small>
                        <p class="mb-0 text-right"><strong>Pink Accent 2</strong></p>
                        <p class="mb-0 text-right">.pink.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-pink border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink accent-3 float-left">#F50057</small>
                        <p class="mb-0 text-right"><strong>Pink Accent 3</strong></p>
                        <p class="mb-0 text-right">.pink.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-pink border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted pink accent-4 float-left">#C51162</small>
                        <p class="mb-0 text-right"><strong>Pink Accent 4</strong></p>
                        <p class="mb-0 text-right">.pink.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-purple border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Purple Color</strong></p>
                                <p class="card-title">.bg-purple</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#9C27B0</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#AB47BC</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 1</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BA68C8</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 2</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#CE93D8</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 3</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E1BEE7</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 4</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#8E24AA</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 1</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#7B1FA2</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 2</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#6A1B9A</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 3</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#4A148C</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 4</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EA80FC</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 1</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E040FB</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 2</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D500F9</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 3</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-purple bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#DD00FF</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 4</strong>
                                    <p class="mb-0">.bg-purple.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-purple">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Purple Color</strong></p>
                        <p class="card-title">.border-purple</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title"><small class="float-right">#9C27B0</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#AB47BC</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 1</strong>
                                    <p class="mb-0">.border-purple.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BA68C8</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 2</strong>
                                    <p class="mb-0">.border-purple.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#CE93D8</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 3</strong>
                                    <p class="mb-0">.border-purple.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E1BEE7</small></p>
                                <div class="pt-1">
                                    <strong>Purple Lighten 4</strong>
                                    <p class="mb-0">.border-purple.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#8E24AA</small></p>
                                <div class="pt-1">
                                    <strong>Purple Darken 1</strong>
                                    <p class="mb-0">.border-purple.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#7B1FA2</small></p>
                                <div class="pt-1">
                                    <strong>Purple Darken 2</strong>
                                    <p class="mb-0">.border-purple.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#6A1B9A</small></p>
                                <div class="pt-1">
                                    <strong>Purple Darken 3</strong>
                                    <p class="mb-0">.border-purple.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#4A148C</small></p>
                                <div class="pt-1">
                                    <strong>Purple Darken 4</strong>
                                    <p class="mb-0">.border-purple.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#EA80FC</small></p>
                                <div class="pt-1">
                                    <strong>Purple Accent 1</strong>
                                    <p class="mb-0">.border-purple.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#E040FB</small></p>
                                <div class="pt-1">
                                    <strong>Purple Accent 2</strong>
                                    <p class="mb-0">.border-purple.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#D500F9</small></p>
                                <div class="pt-1">
                                    <strong>Purple Accent 3</strong>
                                    <p class="mb-0">.border-purple.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-purple border-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#DD00FF</small></p>
                                <div class="pt-1">
                                    <strong>Purple Accent 4</strong>
                                    <p class="mb-0">.border-purple.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-top-purple border-top-5">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Purple Color</strong></p>
                        <p class="card-title">.purple</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 purple"><small class="float-right">#9C27B0</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-purple border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple lighten-1 float-left">#AB47BC</small>
                        <p class="mb-0 text-right"><strong>Purple Lighten 1</strong></p>
                        <p class="mb-0 text-right">.purple.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-purple border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple lighten-2 float-left">#BA68C8</small>
                        <p class="mb-0 text-right"><strong>Purple Lighten 2</strong></p>
                        <p class="mb-0 text-right">.purple.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-purple border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple lighten-3 float-left">#CE93D8</small>
                        <p class="mb-0 text-right"><strong>Purple Lighten 3</strong></p>
                        <p class="mb-0 text-right">.purple.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-purple border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple lighten-4 float-left">#E1BEE7</small>
                        <p class="mb-0 text-right"><strong>Purple Lighten 4</strong></p>
                        <p class="mb-0 text-right">.purple.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-purple border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple darken-1 float-left">#8E24AA</small>
                        <p class="mb-0 text-right"><strong>purple Darken 1</strong></p>
                        <p class="mb-0 text-right">.purple.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-purple border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple darken-2 float-left">#7B1FA2</small>
                        <p class="mb-0 text-right"><strong>purple Darken 2</strong></p>
                        <p class="mb-0 text-right">.purple.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-purple border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple darken-3 float-left">#6A1B9A</small>
                        <p class="mb-0 text-right"><strong>purple Darken 3</strong></p>
                        <p class="mb-0 text-right">.purple.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-purple border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple darken-4 float-left">#4A148C</small>
                        <p class="mb-0 text-right"><strong>purple Darken 4</strong></p>
                        <p class="mb-0 text-right">.purple.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-purple border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple accent-1 float-left">#EA80FC</small>
                        <p class="mb-0 text-right"><strong>purple Accent 1</strong></p>
                        <p class="mb-0 text-right">.purple.accent-1</p>    
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-purple border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple accent-2 float-left">#E040FB</small>
                        <p class="mb-0 text-right"><strong>purple Accent 2</strong></p>
                        <p class="mb-0 text-right">.purple.accent-2</p>    
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-purple border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple accent-3 float-left">#D500F9</small>
                        <p class="mb-0 text-right"><strong>purple Accent 3</strong></p>
                        <p class="mb-0 text-right">.purple.accent-3</p>    
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-purple border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted purple accent-4 float-left">#DD00FF</small>
                        <p class="mb-0 text-right"><strong>purple Accent 4</strong></p>
                        <p class="mb-0 text-right">.purple.accent-4</p>    
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-blue border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Blue Color</strong></p>
                                <p class="card-title">.bg-blue</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#2196F3</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#42A5F5</small></p>
                                <div class="pt-1">
                                    <strong>Blue Lighten 1</strong>
                                    <p class="mb-0">.bg-blue.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#64B5F6</small></p>
                                <div class="pt-1">
                                    <strong>Blue Lighten 2</strong>
                                    <p class="mb-0">.bg-blue.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#90CAF9</small></p>
                                <div class="pt-1">
                                    <strong>Blue Lighten 3</strong>
                                    <p class="mb-0">.bg-blue.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BBDEFB</small></p>
                                <div class="pt-1">
                                    <strong>Blue Lighten 4</strong>
                                    <p class="mb-0">.bg-blue.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1E88E5</small></p>
                                <div class="pt-1">
                                    <strong>Blue Darken 1</strong>
                                    <p class="mb-0">.bg-blue.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1976D2</small></p>
                                <div class="pt-1">
                                    <strong>Blue Darken 2</strong>
                                    <p class="mb-0">.bg-blue.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1565C0</small></p>
                                <div class="pt-1">
                                    <strong>Blue Darken 3</strong>
                                    <p class="mb-0">.bg-blue.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#0D47A1</small></p>
                                <div class="pt-1">
                                    <strong>Blue Darken 4</strong>
                                    <p class="mb-0">.bg-blue.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#82B1FF</small></p>
                                <div class="pt-1">
                                    <strong>Blue Accent 1</strong>
                                    <p class="mb-0">.bg-blue.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#448AFF</small></p>
                                <div class="pt-1">
                                    <strong>Blue Accent 2</strong>
                                    <p class="mb-0">.bg-blue.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#2979FF</small></p>
                                <div class="pt-1">
                                    <strong>Blue Accent 3</strong>
                                    <p class="mb-0">.bg-blue.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#2962FF</small></p>
                                <div class="pt-1">
                                    <strong>Blue Accent 4</strong>
                                    <p class="mb-0">.bg-blue.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-blue">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Blue Border</strong></p>
                        <p class="card-title">.border-blue</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#2196F3</small></p>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#42A5F5</small></p>
                                <div class="pt-1">
                                    <strong>Blue Lighten 1</strong>
                                    <p class="mb-0">.border-blue.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#64B5F6</small></p>
                                <div class="pt-1">
                                    <strong>Blue Lighten 2</strong>
                                    <p class="mb-0">.border-blue.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#90CAF9</small></p>
                                <div class="pt-1">
                                    <strong>Blue Lighten 3</strong>
                                    <p class="mb-0">.border-blue.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#BBDEFB</small></p>
                                <div class="pt-1">
                                    <strong>Blue Lighten 4</strong>
                                    <p class="mb-0">.border-blue.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1E88E5</small></p>
                                <div class="pt-1">
                                    <strong>Blue Darken 1</strong>
                                    <p class="mb-0">.border-blue.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1976D2</small></p>
                                <div class="pt-1">
                                    <strong>Blue Darken 2</strong>
                                    <p class="mb-0">.border-blue.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1565C0</small></p>
                                <div class="pt-1">
                                    <strong>Blue Darken 3</strong>
                                    <p class="mb-0">.border-blue.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#0D47A1</small></p>
                                <div class="pt-1">
                                    <strong>Blue Darken 4</strong>
                                    <p class="mb-0">.border-blue.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#82B1FF</small></p>
                                <div class="pt-1">
                                    <strong>Blue Accent 1</strong>
                                    <p class="mb-0">.border-blue.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#448AFF</small></p>
                                <div class="pt-1">
                                    <strong>Blue Accent 2</strong>
                                    <p class="mb-0">.border-blue.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#2979FF</small></p>
                                <div class="pt-1">
                                    <strong>Blue Accent 3</strong>
                                    <p class="mb-0">.border-blue.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue border-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#2962FF</small></p>
                                <div class="pt-1">
                                    <strong>Blue Accent 4</strong>
                                    <p class="mb-0">.border-blue.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-top-blue border-top-5">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Blue Color</strong></p>
                        <p class="card-title">.blue</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 blue"><small class="float-right">#2196F3</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-blue border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue lighten-1 float-left">#42A5F5</small>
                        <p class="mb-0 text-right"><strong>Blue Lighten 1</strong></p>
                        <p class="mb-0 text-right">.blue.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue lighten-2 float-left">#64B5F6</small>
                        <p class="mb-0 text-right"><strong>Blue Lighten 2</strong></p>
                        <p class="mb-0 text-right">.blue.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue lighten-3 float-left">#90CAF9</small>
                        <p class="mb-0 text-right"><strong>Blue Lighten 3</strong></p>
                        <p class="mb-0 text-right">.blue.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue lighten-4 float-left">#BBDEFB</small>
                        <p class="mb-0 text-right"><strong>Blue Lighten 4</strong></p>
                        <p class="mb-0 text-right">.blue.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-blue border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue darken-1 float-left">#1E88E5</small>
                        <p class="mb-0 text-right"><strong>Blue Darken 1</strong></p>
                        <p class="mb-0 text-right">.blue.darken-4</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue darken-2 float-left">#1976D2</small>
                        <p class="mb-0 text-right"><strong>Blue Darken 2</strong></p>
                        <p class="mb-0 text-right">.blue.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue darken-3 float-left">#1565C0</small>
                        <p class="mb-0 text-right"><strong>Blue Darken 3</strong></p>
                        <p class="mb-0 text-right">.blue.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue darken-4 float-left">#0D47A1</small>
                        <p class="mb-0 text-right"><strong>Blue Darken 4</strong></p>
                        <p class="mb-0 text-right">.blue.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-blue border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue accent-1 float-left">#82B1FF</small>
                        <p class="mb-0 text-right"><strong>Blue Accent 1</strong></p>
                        <p class="mb-0 text-right">.blue.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue accent-2 float-left">#448AFF</small>
                        <p class="mb-0 text-right"><strong>Blue Accent 2</strong></p>
                        <p class="mb-0 text-right">.blue.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue accent-3 float-left">#2979FF</small>
                        <p class="mb-0 text-right"><strong>Blue Accent 3</strong></p>
                        <p class="mb-0 text-right">.blue.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue accent-4 float-left">#2962FF</small>
                        <p class="mb-0 text-right"><strong>Blue Accent 4</strong></p>
                        <p class="mb-0 text-right">.blue.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-cyan border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Cyan Color</strong></p>
                                <p class="card-title">.bg-cyan</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#00BCD4</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#26C6DA</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Lighten 1</strong>
                                    <p class="mb-0">.bg-cyan.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#4DD0E1</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Lighten 2</strong>
                                    <p class="mb-0">.bg-cyan.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#80DEEA</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Lighten 3</strong>
                                    <p class="mb-0">.bg-cyan.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B2EBF2</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Lighten 4</strong>
                                    <p class="mb-0">.bg-cyan.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00ACC1</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Darken 1</strong>
                                    <p class="mb-0">.bg-cyan.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#0097A7</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Darken 2</strong>
                                    <p class="mb-0">.bg-cyan.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00838F</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Darken 3</strong>
                                    <p class="mb-0">.bg-cyan.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#006064</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Darken 4</strong>
                                    <p class="mb-0">.bg-cyan.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#84FFFF</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Accent 1</strong>
                                    <p class="mb-0">.bg-cyan.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#18FFFF</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Accent 2</strong>
                                    <p class="mb-0">.bg-cyan.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00E5FF</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Accent 3</strong>
                                    <p class="mb-0">.bg-cyan.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-cyan bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00B8D4</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Accent 4</strong>
                                    <p class="mb-0">.bg-cyan.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card-group mb-1">
                <div class="card p-1 border-cyan">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Cyan Color</strong></p>
                        <p class="mb-0 card-title">.border-cyan</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#00BCD4</small></p>
                        </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#26C6DA</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Lighten 1</strong>
                                    <p class="mb-0">.border-cyan.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#4DD0E1</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Lighten 2</strong>
                                    <p class="mb-0">.border-cyan.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#80DEEA</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Lighten 3</strong>
                                    <p class="mb-0">.border-cyan.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B2EBF2</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Lighten 4</strong>
                                    <p class="mb-0">.border-cyan.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00ACC1</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Darken 1</strong>
                                    <p class="mb-0">.border-cyan.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#0097A7</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Darken 2</strong>
                                    <p class="mb-0">.border-cyan.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00838F</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Darken 3</strong>
                                    <p class="mb-0">.border-cyan.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#006064</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Darken 4</strong>
                                    <p class="mb-0">.border-cyan.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#84FFFF</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Accent 1</strong>
                                    <p class="mb-0">.border-cyan.border-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#18FFFF</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Accent 2</strong>
                                    <p class="mb-0">.border-cyan.border-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00E5FF</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Accent 3</strong>
                                    <p class="mb-0">.border-cyan.border-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-cyan border-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00B8D4</small></p>
                                <div class="pt-1">
                                    <strong>Cyan Accent 4</strong>
                                    <p class="mb-0">.border-cyan.border-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card-group mb-1">
                <div class="card p-1 border-top-cyan border-top-5">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Cyan Color</strong></p>
                        <p class="mb-0 card-title">.cyan</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 cyan"><small class="float-right">#00BCD4</small></p>
                    </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-cyan border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan lighten-1 float-left">#26C6DA</small>
                        <p class="mb-0 text-right"><strong>Cyan Lighten 1</strong></p>
                        <p class="mb-0 text-right">.cyan.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-cyan border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan lighten-2 float-left">#4DD0E1</small>
                        <p class="mb-0 text-right"><strong>Cyan Lighten 2</strong></p>
                        <p class="mb-0 text-right">.cyan.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-cyan border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan lighten-3 float-left">#80DEEA</small>
                        <p class="mb-0 text-right"><strong>Cyan Lighten 3</strong></p>
                        <p class="mb-0 text-right">.cyan.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-cyan border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan lighten-4 float-left">#B2EBF2</small>
                        <p class="mb-0 text-right"><strong>Cyan Lighten 4</strong></p>
                        <p class="mb-0 text-right">.cyan.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-cyan border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan darken-1 float-left">#00ACC1</small>
                        <p class="mb-0 text-right"><strong>Cyan Darken 1</strong></p>
                        <p class="mb-0 text-right">.cyan.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-cyan border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan darken-2 float-left">#0097A7</small>
                        <p class="mb-0 text-right"><strong>Cyan Darken 2</strong></p>
                        <p class="mb-0 text-right">.cyan.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-cyan border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan darken-3 float-left">#00838F</small>
                        <p class="mb-0 text-right"><strong>Cyan Darken 3</strong></p>
                        <p class="mb-0 text-right">.cyan.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-cyan border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan darken-4 float-left">#006064</small>
                        <p class="mb-0 text-right"><strong>Cyan Darken 4</strong></p>
                        <p class="mb-0 text-right">.cyan.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-cyan border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan darken-4 float-left">#84FFFF</small>
                        <p class="mb-0 text-right"><strong>Cyan Accent 4</strong></p>
                        <p class="mb-0 text-right">.cyan.accent-4</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-cyan border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan darken-2 float-left">#18FFFF</small>
                        <p class="mb-0 text-right"><strong>Cyan Accent 2</strong></p>
                        <p class="mb-0 text-right">.cyan.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-cyan border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan darken-3 float-left">#00E5FF</small>
                        <p class="mb-0 text-right"><strong>Cyan Accent 3</strong></p>
                        <p class="mb-0 text-right">.cyan.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-cyan border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted cyan darken-4 float-left">#00B8D4</small>
                        <p class="mb-0 text-right"><strong>Cyan Accent 4</strong></p>
                        <p class="mb-0 text-right">.cyan.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-teal border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>teal Color</strong></p>
                                <p class="card-title">.bg-teal</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#009688</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#26A69A</small></p>
                                <div class="pt-1">
                                    <strong>Teal Lighten 1</strong>
                                    <p class="mb-0">.bg-teal.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#4DB6AC</small></p>
                                <div class="pt-1">
                                    <strong>Teal Lighten 2</strong>
                                    <p class="mb-0">.bg-teal.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#80CBC4</small></p>
                                <div class="pt-1">
                                    <strong>Teal Lighten 3</strong>
                                    <p class="mb-0">.bg-teal.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B2DFDB</small></p>
                                <div class="pt-1">
                                    <strong>Teal Lighten 4</strong>
                                    <p class="mb-0">.bg-teal.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00897B</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 1</strong>
                                    <p class="mb-0">.bg-teal.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00796B</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 2</strong>
                                    <p class="mb-0">.bg-teal.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00695C</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 3</strong>
                                    <p class="mb-0">.bg-teal.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#004D40</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 4</strong>
                                    <p class="mb-0">.bg-teal.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#A7FFEB</small></p>
                                <div class="pt-1">
                                    <strong>Teal Accent 1</strong>
                                    <p class="mb-0">.bg-teal.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#64FFDA</small></p>
                                <div class="pt-1">
                                    <strong>Teal Accent 2</strong>
                                    <p class="mb-0">.bg-teal.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1DE9B6</small></p>
                                <div class="pt-1">
                                    <strong>Teal Accent 3</strong>
                                    <p class="mb-0">.bg-teal.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-teal bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00BFA5</small></p>
                                <div class="pt-1">
                                    <strong>Teal Accent 4</strong>
                                    <p class="mb-0">.bg-teal.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4>Border Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-teal">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Teal Color</strong></p>
                        <p class="card-title">.border-teal</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#009688</small></p>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#26A69A</small></p>
                                <div class="pt-1">
                                    <strong>Teal Lighten 1</strong>
                                    <p class="mb-0">.border-teal.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#4DB6AC</small></p>
                                <div class="pt-1">
                                    <strong>Teal Lighten 2</strong>
                                    <p class="mb-0">.border-teal.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#80CBC4</small></p>
                                <div class="pt-1">
                                    <strong>Teal Lighten 3</strong>
                                    <p class="mb-0">.border-teal.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B2DFDB</small></p>
                                <div class="pt-1">
                                    <strong>Teal Lighten 4</strong>
                                    <p class="mb-0">.border-teal.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00897B</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 1</strong>
                                    <p class="mb-0">.border-teal.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00796B</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 2</strong>
                                    <p class="mb-0">.border-teal.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00695C</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 3</strong>
                                    <p class="mb-0">.border-teal.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#004D40</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 4</strong>
                                    <p class="mb-0">.border-teal.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#A7FFEB</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 1</strong>
                                    <p class="mb-0">.border-teal.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#64FFDA</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 2</strong>
                                    <p class="mb-0">.border-teal.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#1DE9B6</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 3</strong>
                                    <p class="mb-0">.border-teal.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-teal border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#00BFA5</small></p>
                                <div class="pt-1">
                                    <strong>Teal Darken 4</strong>
                                    <p class="mb-0">.border-teal.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Teal Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-top-teal border-top-5">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Teal Color</strong></p>
                        <p class="card-title">.teal</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 teal"><small class="float-right">#009688</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-teal border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal lighten-1 float-left">#26A69A</small>
                        <p class="mb-0 text-right"><strong>Teal Lighten 1</strong></p>
                        <p class="mb-0 text-right">.teal.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-teal border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal lighten-2 float-left">#4DB6AC</small>
                        <p class="mb-0 text-right"><strong>Teal Lighten 2</strong></p>
                        <p class="mb-0 text-right">.teal.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-teal border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal lighten-3 float-left">#80CBC4</small>
                        <p class="mb-0 text-right"><strong>Teal Lighten 3</strong></p>
                        <p class="mb-0 text-right">.teal.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-teal border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal lighten-4 float-left">#B2DFDB</small>
                        <p class="mb-0 text-right"><strong>Teal Lighten 4</strong></p>
                        <p class="mb-0 text-right">.teal.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-teal border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal darken-1 float-left">#00897B</small>
                        <p class="mb-0 text-right"><strong>Teal Darken 1</strong></p>
                        <p class="mb-0 text-right">.teal.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-teal border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal darken-2 float-left">#00796B</small>
                        <p class="mb-0 text-right"><strong>Teal Darken 2</strong></p>
                        <p class="mb-0 text-right">.teal.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-teal border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal darken-3 float-left">#00695C</small>
                        <p class="mb-0 text-right"><strong>Teal Darken 3</strong></p>
                        <p class="mb-0 text-right">.teal.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-teal border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal darken-4 float-left">#004D40</small>
                        <p class="mb-0 text-right"><strong>Teal Darken 4</strong></p>
                        <p class="mb-0 text-right">.teal.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-teal border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal accent-1 float-left">#A7FFEB</small>
                        <p class="mb-0 text-right"><strong>Teal Accent 1</strong></p>
                        <p class="mb-0 text-right">.teal.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-teal border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal accent-2 float-left">#64FFDA</small>
                        <p class="mb-0 text-right"><strong>Teal Accent 2</strong></p>
                        <p class="mb-0 text-right">.teal.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-teal border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal accent-3 float-left">#1DE9B6</small>
                        <p class="mb-0 text-right"><strong>Teal Accent 3</strong></p>
                        <p class="mb-0 text-right">.teal.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-teal border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted teal accent-4 float-left">#00BFA5</small>
                        <p class="mb-0 text-right"><strong>Teal Accent 4</strong></p>
                        <p class="mb-0 text-right">.teal.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-yellow border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Yellow Color</strong></p>
                                <p class="card-title">.bg-yellow</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#FFEB3B</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFEE58</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Lighten 1</strong>
                                    <p class="mb-0">.bg-yellow.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFF176</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Lighten 2</strong>
                                    <p class="mb-0">.bg-yellow.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFF59D</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Lighten 3</strong>
                                    <p class="mb-0">.bg-yellow.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFF9C4</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Lighten 4</strong>
                                    <p class="mb-0">.bg-yellow.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FDD835</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 1</strong>
                                    <p class="mb-0">.bg-yellow.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FBC02D</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 2</strong>
                                    <p class="mb-0">.bg-yellow.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F9A825</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 3</strong>
                                    <p class="mb-0">.bg-yellow.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F57F17</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 4</strong>
                                    <p class="mb-0">.bg-yellow.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-accent-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFFF8D</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Accent 1</strong>
                                    <p class="mb-0">.bg-yellow.bg-accent-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-accent-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFFF00</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Accent 2</strong>
                                    <p class="mb-0">.bg-yellow.bg-accent-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-accent-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFEA00</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Accent 3</strong>
                                    <p class="mb-0">.bg-yellow.bg-accent-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-yellow bg-accent-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFD600</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Accent 4</strong>
                                    <p class="mb-0">.bg-yellow.bg-accent-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-yellow">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Yellow Color</strong></p>
                        <p class="card-title">.border-yellow</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#FFEB3B</small></p>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFEE58</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Lighten 1</strong>
                                    <p class="mb-0">.border-yellow.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFF176</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Lighten 2</strong>
                                    <p class="mb-0">.border-yellow.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFF59D</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Lighten 3</strong>
                                    <p class="mb-0">.border-yellow.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFF9C4</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Lighten 4</strong>
                                    <p class="mb-0">.border-yellow.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FDD835</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 1</strong>
                                    <p class="mb-0">.border-yellow.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FBC02D</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 2</strong>
                                    <p class="mb-0">.border-yellow.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F9A825</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 3</strong>
                                    <p class="mb-0">.border-yellow.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#F57F17</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 4</strong>
                                    <p class="mb-0">.border-yellow.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFFF8D</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 1</strong>
                                    <p class="mb-0">.border-yellow.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFFF00</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 2</strong>
                                    <p class="mb-0">.border-yellow.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFEA00</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 3</strong>
                                    <p class="mb-0">.border-yellow.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-yellow border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#FFD600</small></p>
                                <div class="pt-1">
                                    <strong>Yellow Darken 4</strong>
                                    <p class="mb-0">.border-yellow.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4>Text Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-top-yellow border-top-5">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Yellow Color</strong></p>
                        <p class="card-title">.yellow</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 yellow"><small class="float-right">#FFEB3B</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-amber border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber lighten-1 float-left">#FFEE58</small>
                        <p class="mb-0 text-right"><strong>Amber Lighten 1</strong></p>
                        <p class="mb-0 text-right">.amber.lighten-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-amber border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber lighten-2 float-left">#FFF176</small>
                        <p class="mb-0 text-right"><strong>Amber Lighten 2</strong></p>
                        <p class="mb-0 text-right">.amber.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-amber border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber lighten-3 float-left">#FFF59D</small>
                        <p class="mb-0 text-right"><strong>Amber Lighten 3</strong></p>
                        <p class="mb-0 text-right">.amber.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-amber border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber lighten-4 float-left">#FFF9C4</small>
                        <p class="mb-0 text-right"><strong>Amber Lighten 4</strong></p>
                        <p class="mb-0 text-right">.amber.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-amber border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber darken-1 float-left">#FDD835</small>
                        <p class="mb-0 text-right"><strong>Amber Darken 1</strong></p>
                        <p class="mb-0 text-right">.amber.darken-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-amber border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber darken-2 float-left">#FBC02D</small>
                        <p class="mb-0 text-right"><strong>Amber Darken 2</strong></p>
                        <p class="mb-0 text-right">.amber.darken-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-amber border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber darken-3 float-left">#F9A825</small>
                        <p class="mb-0 text-right"><strong>Amber Darken 3</strong></p>
                        <p class="mb-0 text-right">.amber.darken-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-amber border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber darken-3 float-left">#F57F17</small>
                        <p class="mb-0 text-right"><strong>Amber Darken 4</strong></p>
                        <p class="mb-0 text-right">.amber.darken-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="card mb-1 border-top-amber border-top-accent-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber accent-1 float-left">#FFFF8D</small>
                        <p class="mb-0 text-right"><strong>Accent accent 1</strong></p>
                        <p class="mb-0 text-right">.amber.accent-1</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-amber border-top-accent-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber accent-2 float-left">#FFFF00</small>
                        <p class="mb-0 text-right"><strong>Accent accent 2</strong></p>
                        <p class="mb-0 text-right">.amber.accent-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-amber border-top-accent-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber accent-3 float-left">#FFEA00</small>
                        <p class="mb-0 text-right"><strong>Accent accent 3</strong></p>
                        <p class="mb-0 text-right">.amber.accent-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-amber border-top-accent-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted amber accent-4 float-left">#FFD600</small>
                        <p class="mb-0 text-right"><strong>Accent accent 4</strong></p>
                        <p class="mb-0 text-right">.amber.accent-4</p>       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
	<div class="card">
		<div class="row">
			<div class="col-md-12 mt-2 ml-2">
				<h4 class="card-title">Background Color</h4>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="card m-0 p-1 text-white bg-amber border-top-radius-palette">
					<div class="card-content">
						<div class="card-body">
							<div class="float-left">
								<p class="white mb-0"><strong>Amber Color</strong></p>
								<p class="card-title">.bg-amber</p>
							</div>
							<div class="float-right">
								<p class="card-title"><small class="float-right">#FFC107</small></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 col-lg-4">
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-lighten-1 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFCA28</small></p>
								<div class="pt-1">
									<strong>Amber Lighten 1</strong>
									<p class="mb-0">.bg-amber.bg-lighten-1</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-lighten-2 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFD54F</small></p>
								<div class="pt-1">
									<strong>Amber Lighten 2</strong>
									<p class="mb-0">.bg-amber.bg-lighten-2</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-lighten-3 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFE082</small></p>
								<div class="pt-1">
									<strong>Amber Lighten 3</strong>
									<p class="mb-0">.bg-amber.bg-lighten-3</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-lighten-4 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFECB3</small></p>
								<div class="pt-1">
									<strong>Amber Lighten 4</strong>
									<p class="mb-0">.bg-amber.bg-lighten-4</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12 col-lg-4">
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-darken-1 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFB300</small></p>
								<div class="pt-1">
									<strong>Amber Darken 1</strong>
									<p class="mb-0">.bg-amber.bg-darken-1</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-darken-2 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFA000</small></p>
								<div class="pt-1">
									<strong>Amber Darken 2</strong>
									<p class="mb-0">.bg-amber.bg-darken-2</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-darken-3 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FF8F00</small></p>
								<div class="pt-1">
									<strong>Amber Darken 3</strong>
									<p class="mb-0">.bg-amber.bg-darken-3</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-darken-4 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FF6F00</small></p>
								<div class="pt-1">
									<strong>Amber Darken 4</strong>
									<p class="mb-0">.bg-amber.bg-darken-4</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12 col-lg-4">
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-accent-1 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFE57F</small></p>
								<div class="pt-1">
									<strong>Amber Accent 1</strong>
									<p class="mb-0">.bg-amber.bg-accent-1</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-accent-2 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFD740</small></p>
								<div class="pt-1">
									<strong>Amber Accent 2</strong>
									<p class="mb-0">.bg-amber.bg-accent-2</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-accent-3 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFC400</small></p>
								<div class="pt-1">
									<strong>Amber Accent 3</strong>
									<p class="mb-0">.bg-amber.bg-accent-3</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="bg-amber bg-accent-4 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFAB00</small></p>
								<div class="pt-1">
									<strong>Amber Accent 4</strong>
									<p class="mb-0">.bg-amber.bg-accent-4</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
	<div class="row">
		<div class="col-md-12 mt-3 mb-1">
			<h5>Border Color</h5>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="card-group mb-1">
				<div class="card p-1 border-amber">
					<div class="card-body">
					<div class="float-left">
						<p class="mb-0"><strong>Amber Color</strong></p>
						<p class="mb-0 card-title">.border-amber</p>
					</div>
						<div class="float-right">
							<p class="card-title"><small class="float-right">#FFC107</small></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 col-lg-4">
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-lighten-1 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFCA28</small></p>
								<div class="pt-1">
									<strong>Amber Lighten 1</strong>
									<p class="mb-0">.border-amber.border-lighten-1</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-lighten-2 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFD54F</small></p>
								<div class="pt-1">
									<strong>Amber Lighten 2</strong>
									<p class="mb-0">.border-amber.border-lighten-2</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-lighten-3 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFE082</small></p>
								<div class="pt-1">
									<strong>Amber Lighten 3</strong>
									<p class="mb-0">.border-amber.border-lighten-3</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-lighten-4 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFECB3</small></p>
								<div class="pt-1">
									<strong>Amber Lighten 4</strong>
									<p class="mb-0">.border-amber.border-lighten-4</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12 col-lg-4">
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-darken-1 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFB300</small></p>
								<div class="pt-1">
									<strong>Amber Darken 1</strong>
									<p class="mb-0">.border-amber.border-darken-1</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-darken-2 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFA000</small></p>
								<div class="pt-1">
									<strong>Amber Darken 2</strong>
									<p class="mb-0">.border-amber.border-darken-2</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-darken-3 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FF8F00</small></p>
								<div class="pt-1">
									<strong>Amber Darken 3</strong>
									<p class="mb-0">.border-amber.border-darken-3</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-darken-4 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FF6F00</small></p>
								<div class="pt-1">
									<strong>Amber Darken 4</strong>
									<p class="mb-0">.border-amber.border-darken-4</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12 col-lg-4">
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-accent-1 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFE57F</small></p>
								<div class="pt-1">
									<strong>Amber Accent 1</strong>
									<p class="mb-0">.border-amber.border-accent-1</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-accent-2 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFD740</small></p>
								<div class="pt-1">
									<strong>Amber Accent 2</strong>
									<p class="mb-0">.border-amber.border-accent-2</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-accent-3 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFC400</small></p>
								<div class="pt-1">
									<strong>Amber Accent 3</strong>
									<p class="mb-0">.border-amber.border-accent-3</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card mb-1">
				<div class="card-content">
					<div class="row">
						<div class="col-4 pr-0">
							<div class="border-amber border-accent-4 h-100 border-left-radius-palette"></div>
						</div>
						<div class="col-8 pl-0">
							<div class="p-1">
								<p><small class="text-muted float-right">#FFAB00</small></p>
								<div class="pt-1">
									<strong>Amber Accent 4</strong>
									<p class="mb-0">.border-amber.border-accent-4</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
	<div class="row">
		<div class="col-md-12 mt-3 mb-1">
			<h5>Text Color</h5>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="card-group mb-1">
				<div class="card p-1 border-top-amber border-top-5">
					<div class="card-content">
						<div class="card-body">
						<div class="float-left">
							<p class="mb-0"><strong>Amber Color</strong></p>
							<p class="card-title">.amber</p>
						</div>
						<div class="float-right">
							<p class="card-title mb-0 amber"><small class="float-right">#FFC107</small></p>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 col-lg-4">
			<div class="card mb-1 border-top-amber border-top-lighten-1 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber lighten-1 float-left">#FFCA28</small>
						<p class="mb-0 text-right"><strong>Amber Lighten 1</strong></p>
						<p class="mb-0 text-right">.amber.lighten-1</p>       
					</div>
				</div>
			</div>
			<div class="card mb-1 border-top-amber border-top-lighten-2 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber lighten-2 float-left">#FFD54F</small>
						<p class="mb-0 text-right"><strong>Amber Lighten 2</strong></p>
						<p class="mb-0 text-right">.amber.lighten-2</p>       
					</div>
				</div>
			</div>
			<div class="card mb-1 border-top-amber border-top-lighten-3 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber lighten-3 float-left">#FFE082</small>
						<p class="mb-0 text-right"><strong>Amber Lighten 3</strong></p>
						<p class="mb-0 text-right">.amber.lighten-3</p>       
					</div>
				</div>
			</div>
			<div class="card mb-1 border-top-amber border-top-lighten-4 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber lighten-4 float-left">#FFECB3</small>
						<p class="mb-0 text-right"><strong>Amber Lighten 4</strong></p>
						<p class="mb-0 text-right">.amber.lighten-4</p>       
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12 col-lg-4">
			<div class="card mb-1 border-top-amber border-top-darken-1 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber darken-1 float-left">#FFB300</small>
						<p class="mb-0 text-right"><strong>Amber Darken 1</strong></p>
						<p class="mb-0 text-right">.amber.darken-1</p>       
					</div>
				</div>
			</div>
			<div class="card mb-1 border-top-amber border-top-darken-2 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber darken-2 float-left">#FFA000</small>
						<p class="mb-0 text-right"><strong>Amber Darken 2</strong></p>
						<p class="mb-0 text-right">.amber.darken-2</p>       
					</div>
				</div>
			</div>
			<div class="card mb-1 border-top-amber border-top-darken-3 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber darken-3 float-left">#FF8F00</small>
						<p class="mb-0 text-right"><strong>Amber Darken 3</strong></p>
						<p class="mb-0 text-right">.amber.darken-3</p>       
					</div>
				</div>
			</div>
			<div class="card mb-1 border-top-amber border-top-darken-4 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber darken-4 float-left">#FF6F00</small>
						<p class="mb-0 text-right"><strong>Amber Darken 4</strong></p>
						<p class="mb-0 text-right">.amber.darken-4</p>       
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12 col-lg-4">
			<div class="card mb-1 border-top-amber border-top-accent-1 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber accent-1 float-left">#FFE57F</small>
						<p class="mb-0 text-right"><strong>Amber Accent 1</strong></p>
						<p class="mb-0 text-right">.amber.accent-1</p>       
					</div>
				</div>
			</div>
			<div class="card mb-1 border-top-amber border-top-accent-2 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber accent-2 float-left">#FFD740</small>
						<p class="mb-0 text-right"><strong>Amber Accent 2</strong></p>
						<p class="mb-0 text-right">.amber.accent-2</p>       
					</div>
				</div>
			</div>
			<div class="card mb-1 border-top-amber border-top-accent-3 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber accent-3 float-left">#FFC400</small>
						<p class="mb-0 text-right"><strong>Amber Accent 3</strong></p>
						<p class="mb-0 text-right">.amber.accent-3</p>       
					</div>
				</div>
			</div>
			<div class="card mb-1 border-top-amber border-top-accent-4 border-top-5">
				<div class="card-content">
					<div class="p-1">
						<small class="text-muted amber accent-4 float-left">#FFAB00</small>
						<p class="mb-0 text-right"><strong>Amber Accent 4</strong></p>
						<p class="mb-0 text-right">.amber.accent-4</p>       
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Text color end -->
<!-- Background color start -->
<section id="backColor">
    <div class="card">
        <div class="row">
            <div class="col-md-12 mt-2 ml-2">
                <h4 class="card-title">Background Color</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card m-0 p-1 text-white bg-blue-grey border-top-radius-palette">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="float-left">
                                <p class="white mb-0"><strong>Blue Grey Color</strong></p>
                                <p class="card-title">.bg-blue-grey</p>
                            </div>
                            <div class="float-right">
                                <p class="card-title"><small class="float-right">#607D8B</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue-grey bg-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#78909C</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Lighten 1</strong>
                                    <p class="mb-0">.bg-blue-grey.bg-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue-grey bg-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#90A4AE</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Lighten 2</strong>
                                    <p class="mb-0">.bg-blue-grey.bg-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue-grey bg-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B0BEC5</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Lighten 3</strong>
                                    <p class="mb-0">.bg-blue-grey.bg-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue-grey bg-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#CFD8DC</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Lighten 4</strong>
                                    <p class="mb-0">.bg-blue-grey.bg-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue-grey bg-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#546E7A</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Darken 1</strong>
                                    <p class="mb-0">.bg-blue-grey.bg-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue-grey bg-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#455A64</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Darken 2</strong>
                                    <p class="mb-0">.bg-blue-grey.bg-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue-grey bg-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#37474F</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Darken 3</strong>
                                    <p class="mb-0">.bg-blue-grey.bg-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="bg-blue-grey bg-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#263238</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Darken 4</strong>
                                    <p class="mb-0">.bg-blue-grey.bg-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Border Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-blue-grey">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Blue Grey Color</strong></p>
                        <p class="card-title">.border-blue-grey</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#607D8B</small></p>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue-grey border-lighten-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#78909C</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Lighten 1</strong>
                                    <p class="mb-0">.border-blue-grey.border-lighten-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue-grey border-lighten-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#90A4AE</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Lighten 2</strong>
                                    <p class="mb-0">.border-blue-grey.border-lighten-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue-grey border-lighten-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#B0BEC5</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Lighten 3</strong>
                                    <p class="mb-0">.border-blue-grey.border-lighten-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue-grey border-lighten-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#CFD8DC</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Lighten 4</strong>
                                    <p class="mb-0">.border-blue-grey.border-lighten-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue-grey border-darken-1 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#546E7A</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Darken 1</strong>
                                    <p class="mb-0">.border-blue-grey.border-darken-1</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue-grey border-darken-2 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#455A64</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Darken 2</strong>
                                    <p class="mb-0">.border-blue-grey.border-darken-2</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue-grey border-darken-3 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#37474F</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Darken 3</strong>
                                    <p class="mb-0">.border-blue-grey.border-darken-3</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="row">
                        <div class="col-4 pr-0">
                            <div class="border-blue-grey border-darken-4 h-100 border-left-radius-palette"></div>
                        </div>
                        <div class="col-8 pl-0">
                            <div class="p-1">
                                <p><small class="text-muted float-right">#263238</small></p>
                                <div class="pt-1">
                                    <strong>Blue Grey Darken 4</strong>
                                    <p class="mb-0">.border-blue-grey.border-darken-4</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h5>Text Color</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-top-blue-grey border-top-5">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Blue Grey Color</strong></p>
                        <p class="card-title">.blue-grey</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 blue-grey"><small class="float-right">#607D8B</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-1 border-top-blue-grey border-top-lighten-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue-grey lighten-1 float-left">#78909C</small>
                        <p class="mb-0 text-right"><strong>Blue Grey Lighten 1</strong></p>
                        <p class="mb-0 text-right">.blue-grey.lighten-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue-grey border-top-lighten-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue-grey lighten-2 float-left">#90A4AE</small>
                        <p class="mb-0 text-right"><strong>Blue Grey Lighten 2</strong></p>
                        <p class="mb-0 text-right">.blue-grey.lighten-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue-grey border-top-lighten-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue-grey lighten-3 float-left">#B0BEC5</small>
                        <p class="mb-0 text-right"><strong>Blue Grey Lighten 3</strong></p>
                        <p class="mb-0 text-right">.blue-grey.lighten-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue-grey border-top-lighten-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue-grey lighten-4 float-left">#CFD8DC</small>
                        <p class="mb-0 text-right"><strong>Blue Grey Lighten 4</strong></p>
                        <p class="mb-0 text-right">.blue-grey.lighten-4</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-1 border-top-blue-grey border-top-darken-1 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue-grey darken-1 float-left">#546E7A</small>
                        <p class="mb-0 text-right"><strong>Blue Grey Darken 1</strong></p>
                        <p class="mb-0 text-right">.blue-grey.darken-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue-grey border-top-darken-2 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue-grey darken-2 float-left">#455A64</small>
                        <p class="mb-0 text-right"><strong>Blue Grey Darken 2</strong></p>
                        <p class="mb-0 text-right">.blue-grey.darken-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue-grey border-top-darken-3 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue-grey darken-3 float-left">#37474F</small>
                        <p class="mb-0 text-right"><strong>Blue Grey Darken 3</strong></p>
                        <p class="mb-0 text-right">.blue-grey.darken-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-top-blue-grey border-top-darken-4 border-top-5">
                <div class="card-content">
                    <div class="p-1">
                        <small class="text-muted blue-grey darken-4 float-left">#263238</small>
                        <p class="mb-0 text-right"><strong>Blue Grey Darken 4</strong></p>
                        <p class="mb-0 text-right">.blue-grey.darken-4</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->
</div>

<script type="text/javascript">
	
</script>